import classnames from 'classnames'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useStore } from '@/store'
import { observer } from 'mobx-react-lite'
import { useState } from 'react'

// 定义props
type Props = {
  hide: () => void
}

const Channels = ({ hide }: Props) => {
  const { channelStore } = useStore()
  // 切换编辑状态
  const [isEdit, setEdit] = useState(false)

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" clickHandler={hide} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', { edit: isEdit })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span
              className="channel-item-edit"
              onClick={() => setEdit(!isEdit)}>
              编辑
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {channelStore.channelData.channels.map((channel) => {
              return (
                <span
                  onClick={() => channelStore.switchActiveKey(channel.id)}
                  key={channel.id}
                  className={classnames('channel-list-item', {
                    selected: channelStore.activeKey === channel.id,
                  })}>
                  {channel.name}
                  <Icon
                    type="iconbtn_tag_close"
                    clickHandler={() => channelStore.delMyChannel(channel.id)}
                  />
                </span>
              )
            })}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {channelStore.choseChannelList.map((item) => {
              return (
                <span
                  key={item.id}
                  className="channel-list-item"
                  onClick={() => channelStore.addMyChannel(item)}>
                  + {item.name}
                </span>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default observer(Channels)
